import React from 'react';
import { inject, observer } from 'mobx-react';
import { InputNumber, Icon, Popconfirm } from 'antd';
import { WeaLocaleProvider, WeaCheckbox, WeaColorPicker, WeaUpload } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

let isScrolling = false;

@inject('portalDeskTopStore')
@observer
class BgImages extends React.Component {
    constructor(props) {
        super(props);
        this.onPrev = this.onPrev.bind(this);
        this.onNext = this.onNext.bind(this);
    }

    render() {
        const { portalDeskTopStore } = this.props;
        const { bgImageObj, state, setState, setColor, addBgImage, delBgImage } = portalDeskTopStore;
        const { isSystemer, autoCarousel, carouselTime, imgid, bgImages } = state;
        const { color } = bgImageObj;

        let images = bgImages.map((item, index) => {
            let selectedClassName = item.id == imgid ? 'e9desktop-bg-images-selected' : '';
            return (
                <div key={index} className="e9desktop-bg-images-item">
                    <img src={item.imgsrc} alt="" className={`e9desktop-bg-images-item-img ${selectedClassName}`} onClick={() => setState({ imgid: item.id, autoCarousel: false })} />
                    {
                        isSystemer ? (
                                <Popconfirm ecId={`${this && this.props && this.props.ecId || ''}_Popconfirm@1bgmxr@${item.id}`} title={getLabel(15097, '确定要删除吗？')} onConfirm={() => delBgImage(item)}>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@biamj2@${item.id}`} type="cross-circle" className="e9desktop-bg-images-item-delete" title={getLabel(91, '删除')} />
                                </Popconfirm>
                            ) : ''
                    }
                </div>
            );
        });
        if (isSystemer) {
            images.push(
                <div className="e9desktop-bg-images-item e9desktop-bg-images-item-add">
                    <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@q5rkkq`}
                      uploadId="uploadfile"
                      uploadUrl="/api/portal/fileupload/uploadfile"
                      multiSelection={false}
                      category="stirng"
                      limitType="png,gif,jpeg,jpg,bmp"
                      onChange={(ids, list) => {
                            if (list && list.length) {
                                addBgImage(list[list.length - 1].filelink);
                            }
                        }}
                    >
                        <div className="e9desktop-bg-images-item-add-icon" title={getLabel(20001, '上传图片')}>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7rh69e`} type="plus" />
                        </div>
                    </WeaUpload>
                </div>,
            );
        }
        let length = images.length;

        return (
            <div className="e9desktop-bg-images-content">
                <div className="e9desktop-bg-images-toolbar">
                    <div className="e9desktop-bg-images-label" style={{ marginRight: '20px' }}>{getLabel(387145, '单击切换背景')}</div>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@65woeq`} value={autoCarousel} content={getLabel(387146, '自动轮播')} onChange={() => setState({ autoCarousel: !autoCarousel })} />
                    <div className="e9desktop-bg-images-label">{getLabel(387147, '轮播速度：')}</div>
                    <InputNumber ecId={`${this && this.props && this.props.ecId || ''}_InputNumber@lxs2rw`} value={carouselTime} min={0} disabled={!autoCarousel} style={{ width: '70px', marginTop: '-4px' }} onChange={value => setState({ carouselTime: value })} />
                </div>
                <div className="e9desktop-bg-images-toolbar">
                    <div className="e9desktop-bg-images-label">{getLabel(128223, '字体颜色：')}</div>
                    <WeaColorPicker ecId={`${this && this.props && this.props.ecId || ''}_WeaColorPicker@apev8f`} value={color} onChange={setColor} />
                </div>
                <div className="e9desktop-bg-images">
                    <i className={`icon-coms-Left e9desktop-bg-images-prev ${length < 6 ? 'e9desktop-display-none' : ''}`} title={getLabel(26029, '上一页')} onClick={this.onPrev} />
                    <div className="e9desktop-bg-images-items">
                        <div style={{ position: 'relative', width: length * 70 }}>
                            {images}
                        </div>
                    </div>
                    <i className={`icon-coms-Right e9desktop-bg-images-next ${length < 6 ? 'e9desktop-display-none' : 'icon-coms-pointer'}`} title={getLabel(26028, '下一页')} onClick={this.onNext} />
                </div>
            </div>
        );
    }

    onPrev() {
        const $obj = jQuery('.e9desktop-bg-images-items>div');
        const left = $obj.position().left;
        if (!isScrolling && left < 0) {
            isScrolling = true;
            $obj.animate({ left: (`${left + 70}px`) }, 200, () => {
                isScrolling = false;
            });
        }
    }

    onNext() {
        const $obj = jQuery('.e9desktop-bg-images-items>div');
        const width = $obj.width();
        const left = $obj.position().left;
        if (!isScrolling && (width - 350 + left > 0)) {
            isScrolling = true;
            $obj.animate({ left: (`${left - 70}px`) }, 200, () => {
                isScrolling = false;
            });
        }
    }
}

export default BgImages;
